<template>
  <div>
    <el-dialog
        v-model="visible"
        top="5vh"
        width="700px"
        :show-close="false"
        :close-on-click-modal="false"
        :title="$t('loc.ivtPts')"
        :before-close="handleClose"
        class="invite-parents-dialog"
        destroy-on-close
    >
      <div style="background: #86b934;
                            width: 100%;
                            height: 78px;
                            margin-left: 15px;
                            border-radius: 4px;
                            text-align: center">
        <img src="http://d2urtjxi3o4r5s.cloudfront.net/images/emailInvitate.png" width="39px" height="27px">
        <div class="font-size-22">电子邮箱邀请</div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="$t('loc.notInvited')" name="first">

        </el-tab-pane>
        <el-tab-pane :label="$t('loc.notConnect')" name="second">

        </el-tab-pane>
        <el-tab-pane :label=" $t('loc.parentConnect')" name="third">
          <el-table :data="childParentList" style="width: 100%">
            <el-table-column :label="$t('loc.childName')" width="180">
              <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column :label="$t('loc.ptName')" width="180">
              <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column :label="$t('loc.role')">
              <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column :label="$t('loc.parentEmail')">
              <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column :label="$t('loc.plan9')">
              <template #default="scope">

              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "InviteParentsDialog",
  props: ['dialogVisible', 'groupId'],
  data() {
    return {
      visible: false,
      childParentList: [],
      stageOptions: [],
      visibleGroupIconDropdown: false,
      submitLoading: false,
    }
  },
  methods: {
    handleClose() {
      this.visible = false
      this.$emit('update:dialogVisible', this.visible)
    },
  }
}
</script>

<style scoped lang="less">
/deep/ .el-dialog {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
}

.invite-parents-dialog {
  .input-label {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #323338 !important;
    font-size: 16px !important;
    font-weight: 400;
  }

  .send-report-option {
    /deep/ .el-select .el-input {
      display: flex;
      width: 100px;
    }
  }
}
</style>